<template>
  <div class="typePopup">
    <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }" round>
      <div class="typePopup_box">
        <div class="typePopup_box_content">
          <div class="typePopup_box_content_item" v-for="item in typeList" @click="onClickType(item.name)">{{ item.name }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const typeList = ref([
  {
    id: 1,
    name: '不限'
  },
  {
    id: 2,
    name: '小时工'
  },
  {
    id: 3,
    name: '大龄工'
  },
  {
    id: 4,
    name: '技工'
  },
  {
    id: 5,
    name: '出国劳务'
  }
])

const show = ref(false)

// 点击类别
const onClickType = (name) => {
  show.value = false
  router.push({ path: '/jobListPage', query: { type: name, dynamicKeepAlive: 0 } })
}

defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.typePopup {

  &_box {
    // padding: .5333rem 0;
    height: 100%;
    background-color: #f8f8f8;
    overflow: hidden;

    &_content {
      padding-left: .2667rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: .5333rem;

      &_item {
        width: calc((100% / 3) - .2667rem);
        height: 1.6rem;
        margin-bottom: .2667rem;
        margin-right: .2667rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: .1067rem;
        font-size: .4rem;
        color: #333;
      }
    }
  }
}
</style>